<style lang="less">
    @import "dealWithTask.less";
</style>
<template>
    <div class="search">
        <remind :approve-record="remindApproveRecord"  v-model="remindVisible" />
        <approve-record v-model="recordVisible" ref="approveRecord" :applyNo="applyNoParam"/>
        <Row>
            <Col>
                <Card>
                    <Row>
                        <Form  ref="searchForm" :model="searchForm" inline :label-width="85" class="search-form" @keydown.enter.native="handleSearch">
                         <span v-if="drop">
                            <Form-item label="申请编号" prop="applyNo">
                                <Input type="text" v-model="searchForm.applyNo" clearable placeholder="请输入申请编号"
                                       style="width: 160px"/>
                            </Form-item>
                             <Form-item label="借款人姓名" prop="custName">
                                <Input type="text" v-model="searchForm.custName" clearable placeholder="请输入借款人姓名"
                                       style="width: 160px"/>
                            </Form-item>
                            <Form-item label="业务类型" prop="businessType">
                                <Select v-model="searchForm.businessType" style="width:160px" clearable placeholder="请选择申请类型">
                                    <Option v-for="item in businessTypeList" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                </Select>
                            </Form-item>
                            <Form-item label="处理时间"  prop="endTime">
                                <DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd" clearable
                                            @on-change="selectDateRange" placeholder="选择起始时间"
                                            style="width: 160px"></DatePicker>
                            </Form-item>
                             <Form-item label="标签"  prop="tag" >
                                <Select id="tagSelect" v-model="searchForm.tag"
                                        :max-tag-count="3"
                                        :onscroll="true"
                                        multiple style="width:160px;" placeholder="请输入标签名称"  >
                                    <Option v-for="item in locationData" :value="item.id" :key="item.id"  >{{ item.labelName }}</Option>
                                </Select>
                            </Form-item>
                             <Form-item label="合作商" prop="dealerName">
                                <Input type="text" v-model="searchForm.dealerName" clearable placeholder="请输入合作商名称"
                                       style="width: 160px"/>
                            </Form-item>
                            <Form-item label="贷款金额起" prop="loanAmountStart">
                                <Input type="number" v-model="searchForm.loanAmountStart" clearable placeholder="请输入贷款金额"
                                       style="width: 160px"/>
                            </Form-item>
                            <Form-item label="贷款金额止" prop="loanAmountEnd">
                                <Input type="number" v-model="searchForm.loanAmountEnd" clearable placeholder="请输入贷款金额"
                                       style="width: 160px"/>
                            </Form-item>
                             <Form-item label="车辆" prop="carName">
                                <Input type="text" v-model="searchForm.carName" clearable placeholder="请输入车辆"
                                       style="width: 160px"/>
                            </Form-item>
                            <Form-item label="业务状态(内)" prop="businessStatusIn">
                                <Select v-model="searchForm.businessStatusIn" placement="bottom" style="width:160px" clearable placeholder="请选择业务状态（内）">
                                    <Option v-for="item in businessStatusIn" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                </Select>
                            </Form-item>
                            <Form-item label="流程类型" prop="processType">
                                <Select v-model="searchForm.processType" style="width:160px" clearable placeholder="请选择流程类型">
                                    <Option v-for="item in processTypeList" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                </Select>
                            </Form-item>
                            <Form-item label="车辆类型" prop="carType">
                                <Select v-model="searchForm.carType" style="width:160px" clearable placeholder="请选择车辆类型">
                                    <Option v-for="item in carType" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                </Select>
                            </Form-item>
                         </span>
                            <Col :span="12" :offset="7">
                                <Form-item   v-if="dropDownContent=='展开'">
                                    <Button @click="handleSearch"  type="primary" icon="ios-search">查询</Button>
                                    <Button @click="handleReset"   type="primary" icon="ios-trash">清空</Button>
                                    <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                        <Icon :type="dropDownIcon"></Icon>
                                    </a>
                                </Form-item>
                                <Form-item   v-if="dropDownContent=='收起'">
                                    <Button @click="handleSearch"  type="primary" icon="ios-search">查询</Button>
                                    <Button @click="handleReset"   type="primary" icon="ios-trash">清空</Button>
                                    <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                        <Icon :type="dropDownIcon"></Icon>
                                    </a>
                                </Form-item>
                            </Col>
                        </Form>
                    </Row>
                    <Row>
                    </Row>
                    <Row>
                        <Table  :auto-back-top="false" :loading="loading" border :columns="columns" :data="data" sortable="custom"
                               @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table">
                            <template slot-scope="{ row, index }" slot="action">
                                <Button v-has="'approve_for_me_see_journal'" style="margin-right:5px"    type="primary" size="small" @click="showLogs(row)">查看日志
                                </Button>
                                <Button v-has="'approve_for_me_message'" style="margin-right:5px"    type="primary" size="small" @click="modifyRemind(row)">留言
                                </Button>
                                <Button v-has="'approve_for_me_withdraw'" style="margin-right:5px"  v-if="row.processType==='generaApprove'"  type="primary" size="small" @click="callBack(row)">撤回
                                </Button>

                            </template>
                            <template slot-scope="{ row, index }" slot="applyNo">
                                <DynamicLink v-if="row.processType==='generaApprove'" component="projects/afs-core-business/pages/case/approve/task-detail/regular-approve/regularApproveDetail"
                                             :is-full="true" :params="{businessStateIn:row.businessStateIn,taskId:row.id,applyNo:row.applyNo,stageId:row.stageId,isCheck:'false',isFire:'true',isShown:'yes'}" :name="row.applyNo" page-title="案件详情"></DynamicLink>
                                <DynamicLink v-if="row.processType==='formalReview'" component="projects/afs-core-business/pages/case/approve/task-detail/regular-approve/regularApproveDetail"
                                             :is-full="true"
                                             :params="{taskId:row.id,applyNo:row.applyNo,stageId:row.stageId,isCheck:'false',isFire:'true',isShown:'yes'}"
                                             :name="row.applyNo+'-正式复议'" page-title="正式复议" ></DynamicLink>
                                <DynamicLink v-if="row.processType==='changeAssets'" component="projects/afs-core-business/pages/case/approve/approve-fixed-asset/approvalAsset"
                                             :is-full="true"
                                             :params="{businessStatusIn:row.businessStatusIn,applyNo:row.applyNo,stageId:row.stageId,firstTrail:row.firstTrail,lastTrail:row.lastTrail,isCheck: 'false'}"
                                             :name="row.applyNo+'-资产变更'" page-title="资产修正审批" ></DynamicLink>
                                <DynamicLink v-if="row.processType==='reconsiderApply'" component="projects/afs-core-business/pages/case/approve/reconside-ration/reconsideration"
                                             :is-full="true"
                                             :params="{applyNo:row.applyNo,stageId:row.stageId,firstTrail:row.firstTrail,lastTrail:row.lastTrail}"
                                             :name="row.applyNo+'-复议申请'" page-title="复议申请审批" ></DynamicLink>
                            </template>
                            <template slot-scope="{ row, index }" slot="businessType">
                                <span>{{setBusinessTypeTitle(row.businessType)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="carType">
                                <span>{{setCarTypeTitle(row.carType)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="processType">
                                <span>{{setProcessTypeTitle(row.processType)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="businessStatusIn">
                                <span>{{setBusinessStatusInTitle(row.businessStatusIn)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="tags">
                                <Tag v-for="item in row.labelList" :color="item.labelColor" >{{item.labelName}}</Tag>
                            </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <modal v-model="callBackModalVisible"
                :label-width="80"
                :title="'撤回'"
                :closable="false"
                :mask-closable='false'
                :width="600"
                :styles="{top: '180px'}">
            <div slot="footer">
                <Button type="text" @click="cancelCallBack">取消</Button>
                <Button type="primary"  @click="submitCallBack">提交</Button>
            </div>
            <Spin fix size="large" v-if="repealLoading">
                <slot name="loading"></slot>
            </Spin>
            <Row>
                <Form ref="callBackModal" inline :label-width="30" :model="callBackModal" :rules="callBackValidate"
                      class="search-form">
                    <Form-item label="撤回备注：" :label-width="100" prop="callBackRemark" >
                        <textarea v-model="callBackModal.callBackRemark" maxlength="512" clearable placeholder="请输入撤回备注" style="width: 350px;height: 100px;line-height: 20px"/>
                    </Form-item>
                </Form>
            </Row>
        </modal>
    </div>


</template>
<script>
    import { mapGetters } from "vuex";
    //经我处理
    import {
        queryDealWithTaskList
    } from "@/projects/afs-core-business/api/afs-case/approve/dealWithTask";
    //数据字典
    import {
        getDictDataByType
    } from "_p/basic/api/admin/datadic";

    import circleLoading from "_c/circle-loading/circle-loading.vue";
    //引打标签vue
    import makelabel from "../make-label/makeLabel";
    //根据申请编号获取一打标签
    import {
        queryLabelByApplyNo
    } from "@/projects/afs-core-business/api/afs-case/make-label/makeLabel";
    //获取所有标签信息
    import {
        getAllLabelList
    } from "@/projects/afs-core-business/api/afs-case/manual-label/manualLabel";
    import ApproveRecord from "../approve-record/approve-record";
    //置顶、解锁
    import {
        modifyLock,
        modifyStick
    } from "@/projects/afs-core-business/api/afs-case/approve/taskpoolWait.js";
    import TaskHandler from "./task-handler";
    import Remind from "../remind/remind";
    import {getIsOpenByStageId,callBackFlow} from "../../../../api/afs-case/approve/approveTask";
    export default {
        name: "approve-task",
        components: {
            Remind,
            TaskHandler,
            ApproveRecord,
            circleLoading,
            makelabel
        },
        data() {
            return {
                recordVisible:false,
                makeLabelVisible:false,
                remindVisible:false,
                callBackModalVisible:false,
                repealLoading:false,
                callBackModal:{
                    callBackRemark:""
                },
                modalTitle:"标签信息",
                loading: true,
                operationLoading: false,
                applyno:"",
                applyNoParam:'',
                locationData: [],
                selectDate:null,
                searchForm: {
                    applyNo: "",
                    customerIdCard:"",
                    endTime:"",
                    submitDateStart:null ,
                    submitDateEnd:null,
                    disposeStaff:"",
                    isHighlight:"",
                    custName:"",
                    bondManName:"",
                    downPayScaleStart:"",
                    downPayScaleEnd:"",
                    businessStatusIn:"",
                    taskNodeName:"",
                    isLock:"",
                    carName:"",
                    dealerName:"",
                    loanAmountStart:"",
                    loanAmountEnd:"",
                    scoreShow:"",
                    tag:[],
                    processType:"",
                    businessType:"",
                    pageNumberTag: 1,
                    pageSizeTag: 500
                },
                pageNumberTag: 1,
                pageSizeTag: 500,
                selectDate: null,
                selectList: [],
                selectCount: 0,
                modalType: 0,
                errorPass: "",
                processTypeList:[],
                businessTypeList:[],
                carType:[],
                businessStatusIn:[],
                lockFormVisible:false,
                lockOptionStatus : '',
                modalTitle:'',
                secondsAgo: 0,
                interval: null,
                isOpen:'',
                lockOptionForm:{
                    processRemark:''
                },
                formValidate: {
                    processRemark: [{required: true, message: "备注不能为空", trigger: "blur"}]
                },
                callBackValidate:{
                    callBackRemark:[{required:true, message: "撤回备注不能为空", trigger: "change"}]
                },
                columns: [
                    {
                        title: "操作",
                        key: "action",
                        minWidth: 250,
                        align: "center",
                        fixed: "left",
                        slot: "action",
                        className: 'select-table-info-column'
                    },
                    {
                        title: "业务类型",
                        key: "businessType",
                        type:'singleSelect',
                        sortable: true,
                        minWidth: 110,
                        slot:"businessType",
                        fixed: "left"
                    },
                    {
                        title: "申请编号",
                        key: "applyNo",
                        minWidth: 200,
                        align: "center",
                        fixed: "left",
                        sortable: true,
                        slot:"applyNo"
                    },
                    {
                        title: "借款人姓名",
                        key: "custName",
                        minWidth: 120,
                        sortable: true,
                        fixed: "left",
                    },
                    {
                        title: "标签",
                        key: "tags",
                        minWidth: 280,
                        sortable: true,
                        slot: "tags"
                    },
                    {
                        title: "车辆",
                        key: "carName",
                        sortable: true,
                        minWidth: 110
                    }
                    ,
                    {
                        title: "首付比例",
                        key: "downPayScale",
                        sortable: true,
                        minWidth: 120
                    },
                    {
                        title: "贷款期限",
                        key: "loanTerms",
                        sortable: true,
                        minWidth: 110
                    },
                    {
                        title: "贷款金额",
                        key: "loanAmt",
                        sortable: true,
                        minWidth: 110
                    },
                    {
                        title: "合作商名称",
                        key: "dealerName",
                        sortable: true,
                        minWidth: 120
                    },
                    {
                        title: "处理命令",
                        key: "remainData",
                        sortable: true,
                        minWidth: 120
                    },
                    {
                        title: "处理时间",
                        key: "endTime",
                        sortable: true,
                        minWidth: 160
                    },
                    {
                        title: "当前处理人",
                        key: "disposeStaff",
                        align: "center",
                        sortable: true,
                        minWidth: 120
                    },
                    {
                        title: "业务状态（内）",
                        key: "businessStatusIn",
                        sortable: true,
                        minWidth: 150,
                        slot:"businessStatusIn"
                    },
                    {
                        title: "流程类型",
                        key: "processType",
                        type:'singleSelect',
                        sortable: true,
                        minWidth: 110,
                        slot:"processType"
                    },
                    {
                        title: "个人时效",
                        key: "timming",
                        type:'text',
                        sortable: true,
                        minWidth: 140
                    },
                    {
                        title: "车辆类型",
                        key: "carType",
                        type:'singleSelect',
                        sortable: true,
                        minWidth: 110,
                        slot:"carType"
                    }
                ],
                data: [],
                total: 0,
                totalTag: 0,
                taskHandlerChangeVisible: false,
                remindApproveRecord:{
                    applyNo: '',
                    stageId: '',
                    approveRemark: '',
                    businessStateIn: '',
                    useScene:'approve'
                },
                dropDownContent: '展开',
                dropDownIcon: 'ios-arrow-down',
                drop: false
            };
        },
        computed:{
            ...mapGetters(['userInfo']),
        },
        methods: {
            cancelTaskHandler(){
                this.taskHandlerChangeVisible = false;
            },
            init() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getTaskList();
                this.queryLabelData();

            },
            queryLabelData() {
                this.load= true;
                let params = "";
                params = {
                    pageNumberTag: this.pageNumberTag,
                    pageSizeTag: this.pageSizeTag,
                    label:'manual',
                    status:'takeEffect'
                };
                getAllLabelList(params).then(res => {
                    this.load = false;
                    if (res.code === "0000") {
                        this.locationData = res.data.records;
                    }
                });
            },
            selectDateRange(v) {
                if (v) {
                    this.searchForm.submitDateStart = v[0];
                    this.searchForm.submitDateEnd = v[1];
                }
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getTaskList();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                this.searchForm.submitDateStart = "";
                this.searchForm.submitDateEnd = "";

                // 重新加载数据
                this.getTaskList();
            },
            //打标签 add by gjq
            addTags() {
                if (this.selectCount <= 0 || this.selectCount == undefined) {
                    this.$Message.warning("您还未选择数据");
                    return;
                }else if(this.selectCount > 1){
                    this.$Message.warning("请勾选单条数据操作");
                    return;
                }
                let apply="";
                let businessStatus="";
                this.selectList.forEach(function (e) {
                    apply=e.applyNo ;
                    businessStatus=e.businessStatusIn;

                });
                if(businessStatus==='repeal'
                    ||businessStatus==='approved'
                    ||businessStatus==='reject'
                    ||businessStatus==='conditionalApproval'
                    ||businessStatus==='cancelConditional'){
                    this.$Message.warning("该业务状态下不允许此操作！");
                    return;
                }
                this.applyno= apply;
                this.makeLabelVisible = true;
                queryLabelByApplyNo(this.applyno).then(res => {
                    if (res.code === "0000") {
                        this.$refs.selectLabel.getSelectLabel(res.data);
                    }
                });
            },
            hasSelected() {
                if (this.selectCount == 0) {
                    this.$Message.warning("需先勾选数据行!");
                    return false;
                } else {
                    return true;
                }
            },
            existsCurrentStatus(type, status) {
                let currentStatusNum = 0;
                this.selectList.forEach(record => {
                    if (type == "1") {
                        if (record.isLock == status) {
                            currentStatusNum++;
                        }
                    } else if (type == "2") {
                        if (record.isHighlight == status) {
                            currentStatusNum++;
                        }
                    }
                });
                return currentStatusNum > 0;
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
                 this.getTaskList();
            },
            showSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
                // 仅在定时器数据刷新时选中框处理需要用到
                // 此处拿到的dataList是克隆数据，需改变源数据属性才有效
                this.data.forEach(tableData=>{
                    tableData._checked = false;
                    e.forEach( data => {
                        if(data.applyNo == tableData.applyNo){
                            tableData._checked = true;
                        }
                    })
                })
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getTaskList();
                this.clearSelectAll();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getTaskList();
            },
            showLogs(v) {
                this.applyNoParam = v.applyNo;
                this.recordVisible = true;
            },
            afterChangeOwner(row){
                this.taskHandlerChangeVisible = false;
                this.getTaskList();
            },
            cancelCallBack(){
                this.callBackModal.callBackRemark = "";
                this.callBackModalVisible = false;
            },
            callBack(v){
                this.remindApproveRecord.stageId = v.stageId;
                //撤回前判断当前任务是否已被打开
                getIsOpenByStageId(this.remindApproveRecord.stageId).then(res =>{
                    if (res.code === "0000") {
                        this.isOpen = res.data;
                        //添加撤回备注再执行撤回
                        if (this.isOpen === "yes") {
                            this.callBackModalVisible = true;
                        }else {
                            //直接撤回
                            this.$Modal.confirm({
                                title: "撤回确认",
                                content: "确认要撤回吗?",
                                onOk:() => {
                                    this.executeCallBack();
                                }});

                        }
                    }
                });

            },
            submitCallBack(){
                this.repealLoading = true;
                this.$refs.callBackModal.validate((valid) => {
                    if (valid){
                        this.executeCallBack();
                    }else{
                        this.repealLoading = false;
                        this.$Message.error('请输入撤回备注');
                        return false;
                    }
                });
            },
            executeCallBack(){
                callBackFlow({
                    scheduleId: this.remindApproveRecord.stageId,
                    message: this.callBackModal.callBackRemark===''?"无":this.callBackModal.callBackRemark
                }).then(res =>{
                    if (res.code === "0000") {
                        this.getTaskList();
                        this.$Message.success("撤回成功!");
                    }else {
                        this.$Message.info("撤回失败!");
                    }
                    this.callBackModalVisible = false;
                    this.repealLoading = false;
                }).catch(e =>{
                    this.callBackModalVisible = false;
                    this.repealLoading = false;
                });
            },
            modifyRemind(v){
                if (v.processType !== 'formalReview') {
                    if(v.processorEnd&&v.processorEnd!==''){
                        this.$Message.warning("该案件已出结果,不可操作!");
                        return;
                    }
                }
                this.remindApproveRecord.stageId = v.stageId;
                this.remindApproveRecord.applyNo=v.applyNo;
                this.remindApproveRecord.businessStateIn=v.businessStateIn;
                this.remindVisible=true;
            },
            getTaskList() {
                // 多条件搜索任务列表
                this.loading = true;
                let tag=this.searchForm.tag;
                if(tag!==""){
                    this.searchForm.tag= this.searchForm.tag.join(',');
                }
                queryDealWithTaskList(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                    this.searchForm.tag=tag;
                    if(this.total > 0) {
                        this.startAddSeconds();
                    }
                });
                this.selectCount=0;
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = '展开'
                    this.dropDownIcon = 'ios-arrow-down'
                } else {
                    this.dropDownContent = '收起'
                    this.dropDownIcon = 'ios-arrow-up'
                }
                this.drop = !this.drop
            },
            initProcessType(){
                let params = {
                    type: "processType"
                }
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.processTypeList = res.data;
                    }
                });
            },
            setProcessTypeTitle(val){
                let dic = {}
                this.processTypeList.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            initBusinessType(){
                let params = {
                    type: "confBusinessType"
                }
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.businessTypeList = res.data;
                    }
                });
            },
            setBusinessTypeTitle(val){
                let dic = {}
                this.businessTypeList.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            initCarType(){
                let params = {
                    type: "carType"
                }
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.carType = res.data;
                    }
                });
            },
            setCarTypeTitle(val){
                let dic = {}
                this.carType.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            initYesOrNoType(){
                let params = {
                    type: "isType"
                }
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.isOpen = res.data;
                        this.isLock = res.data;
                        this.isHighlight = res.data;
                    }
                });
            },
            setIsOpenTitle(val){
                let dic = {}
                this.isLock.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            setIsLockTitle(val){
                let dic = {}
                this.isLock.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            setisHighlightTitle(val){
                let dic = {}
                this.isHighlight.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            initBusinessStatusInType(){
                let params = {
                    type: "businessStateIn"
                }
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.businessStatusIn = res.data;
                    }
                });
            },
            setBusinessStatusInTitle(val){
                let dic = {}
                this.businessStatusIn.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            startAddSeconds() {
                // 清除计时器
                if (this.interval) {
                    clearInterval(this.interval);
                }
                // 重置计时数据
                this.secondsAgo = 0;
                let _this = this;
                this.interval = setInterval(() => {
                    _this.secondsAgo++;
                }, 1000);
            },
            formatTimeUnit(seconds) {
                let hour = parseInt((seconds / 3600).toString());
                let minute = parseInt(((seconds % 3600) / 60).toString());
                let second = (seconds % 3600) % 60;
                return (hour < 10 ? "0" + hour : hour)
                    + " : " + (minute < 10 ? "0" + minute : minute)
                    + " : " + (second < 10 ? "0" + second : second);
            }

        },
        beforeDestroy(){
            if (this.interval) {
                clearInterval(this.interval);
            }
        },
        watch: {
            secondsAgo(newVal, oldVal) {
                this.data.forEach(data => {
                    if (!data.originalSeconds) {
                        data.originalSeconds = 0;
                    }
                    data.timming = this.formatTimeUnit(data.originalSeconds + newVal);
                });
            }
        },
        mounted() {
            this.init();
            this.initCarType();
            this.initProcessType();
            this.initBusinessType();
            this.initYesOrNoType();
            this.initBusinessStatusInType();
        }
    };
</script>
